<template>
  <el-form-item label="班级" prop="classesId">
    <el-select
      v-model="classesId"
      placeholder="请选择班级"
      :schoolCampusId="schoolCampusId"
      :selectValue="selectValue"
      :disabled="disabled"
      @change="handleChange"
      :multiple="multiple"
      clearable
    >
      <el-option v-for="item in classes" :key="item.id" :label="item.className" :value="item.id"></el-option>
    </el-select>
  </el-form-item>
</template>

<script setup>

import { getclasses } from "@/api/school/classes";
const { proxy } = getCurrentInstance();


const emit = defineEmits("schoolClasses");
const classes = ref([]);
const selectValue = ref([]);
const schoolCampusId = ref("");
const classesId = ref([]);

const props = defineProps({
  selectValue: {
    type: [String, Object, Array, Number],
    default: null,
  },
  schoolCampusId: {
    type: [String, Object, Array, Number],
    default: null,
  },
  multiple: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  }

});


watch(() => props.selectValue, val => {

  let v = props.selectValue == "" ? null : props.selectValue;
  if (v != null) {
    classesId.value = v
  }else{
    classesId.value = null
  }

}, { deep: true, immediate: true });

watch(() => props.schoolCampusId, val => {

  console.log("schoolCampusId watch",val)
  getCampClasses()
}, { deep: true, immediate: true });



function getCampClasses() {



  if (props.schoolCampusId != null) {
    getclasses(props.schoolCampusId).then(response => {
      classes.value = response.data;

    });
  }

}

function handleChange(data) {
  emit("schoolClasses", data == "" ? null : data);

}


getCampClasses();
</script>
